<template>
	<view class="page">
		<fu-custom bgColor="text-white" isBack="true"></fu-custom>
		<view class="bargain-bg1">
			<view
				class="action margin-lr padding-50 width-686 radius-16 flex  align-center justify-center flex-direction" v-if="firstBargain">
				<block >
					<view class="action-bg radius-32 padding-top-140 width-686 padding-lr padding-bottom-90">
						<view class="bg-top-txt height-94 line-height-94 fu-fs40 width-432 text-white	text-center">
							{{i18n['自己砍一刀']}}
						</view>
						<view class="padding-lr">
							<text class="color-9a4">{{i18n['成功砍掉']}}<text
									class="text-xxl text-prices">{{cut_price}}{{i18n['元']}}</text></text>
						</view>
						<view class="padding-lr">
							<view class=" margin-bottom-20 relative w100" :style="[{left:(80 - progress)+'%'}]">
								<view
									class=" padding-lr-20 width-210 radius-60 padding-tb-2 text-white text-sm bg-line relative">
									{{i18n['剩于']}}{{progress}}%{{i18n['免费拿']}}
								</view>
							</view>
							<view class="cu-progress  relative round margin-top-xs">
								<view class="button-color round" :style="[{ width: (100 - progress)+'%'}]">
									<!-- {{100 - progress}}% -->
								</view>
								<view class="line-circle height-28 w100">
									<view class="line-item left1 width-14 line-height-14 height-14 radius-100"></view>
									<view class="line-item left2 width-14 line-height-14 height-14 radius-100"></view>
									<view class="line-item left3 width-14 line-height-14 height-14 radius-100"></view>
								</view>
							</view>
							<view class=" relative text-sm flex padding-lr-20 justify-between margin-top-10 color-9a4">
								<view class="line-cup left1 ">20%</view>
								<view class="line-cup left2  ">50%</view>
								<view class="line-cup left3  ">90%</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="margin-top w100 bargain-footer height-88 flex align-center justify-center">
				<button v-if="!firstBargain"
					class="action-button w100 height-88 text-lg text-white text-bold button-box1 cu-btn round"
					@click="handleBargain">{{i18n['自己砍一刀']}}</button>
				<button v-else
					class="action-button w100 height-88 text-lg text-white text-bold button-box2 cu-btn round"
					@click="handleInvitation">{{i18n['邀请好友帮砍']}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstBargain: false,
				goodsImage: '',
				bargainId: '',
				cut_price: 0,
				progress: 100, // 抢购剩余进度
				address: '', //地址
				goodsInfo: '', //商品信息
				activity_id: '', //活动id
				order_money: '', //订单金额
				payable_money: '', //实付款
				order_sn: '', //抢购订单
				order_type: '', //订单类型  10 砍一刀
			}
		},
		computed: {
			uid() {
				return this.$store.getters.uid;
			}
		},
		onLoad(options) {
			this.address = JSON.parse(options.address)
			this.goodsInfo = JSON.parse(options.goods)
			this.order_money = options.order_money
			this.payable_money = options.payable_money
			this.order_type = options.order_type
			this.activity_id = options.activity_id
			console.log(options.address, options.goods, 'options.address');
		},
		methods: {
			// 自己砍一刀
			handleBargain() {
				this.$util.throttle(() => {
					const order_info = {};
					order_info.address = this.address;
					order_info.goods = this.goodsInfo;
					if (this.activity_id != 0) {
						order_info.activity_id = this.activity_id;
					}
					var postdata = {
						order_type: this
							.order_type, //订单类型。类型：int(11) unsigned】1 ：'现金充值'，2：'虚拟币充值'，3 ：'商城交易'  4：积分  5： 拼团 6：秒杀  7：预售  8：抢购
						order_money: this.order_money,
						payable_money: this.payable_money,
						order_info: JSON.stringify(order_info)
					};
					// 统一下单
					this.$api.post(global.apiUrls.postCreateOrder, postdata)
						.then((res) => {
							if (res.data.code == 1) {
								this.firstBargain = true;
								this.cut_price = res.data.data.cut_price;
								this.progress = res.data.data.k_rate;
								this.order_sn = res.data.data.order_sn
							} else {
								this.$message.info(res.data.msg);
							}
						}).catch(err => {
							//取消
							console.log('ERR', err);
						})

				}, 2000, true)
			},
			handleInvitation() {
				uni.redirectTo({
					url: '/pages/activity/bargain/bargain-log/index?order_sn=' + this.order_sn
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background: rgb(255, 3, 42);
		background-size: 100% 100%;
		width: 100%;
	}

	.bargain-bg1 {
		height: 100%;
		background: url($IMG_BASE_URL+'/activity/bargain1.png');
		background-size: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.action {
		position: absolute;
		bottom: 8%;

		.action-bg {
			position: relative;
			z-index: 100;
			background: linear-gradient(#FEF4D4, #FEE8B0);
		}

		.bg-top-txt {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: url($IMG_BASE_URL+'/activity/bg-1.png');
			background-size: 100%;
		}

	}

	.action-button {
		letter-spacing: 10rpx;
		animation: heart 0.8s infinite;
	}

	.bargain-footer {
		position: absolute;
		bottom: 10%;
	}

	.button-box1 {
		width: 463rpx;
		background: linear-gradient(#FDEFCF, #FDDE55);
		border: 1px solid rgb(248, 149, 31);
		color: #9B6839;
	}

	.button-box2 {
		width: 686rpx;
		
		left: 0;
		right: 0;
		background: linear-gradient(#FDEFCF, #FDDE55);
		border: 1px solid rgb(248, 149, 31);
		color: #9B6839;
		margin: 180rpx auto 0;
	}

	.bg-line {
		background-color: #FF4422;
	}

	.bg-line::after {
		position: absolute;
		content: '';
		bottom: -22rpx;
		right: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: auto;
		border-right: 18rpx solid transparent;
		border-left: 18rpx solid transparent;
		border-top: 22rpx solid #FF4422;
	}

	.color-9a4 {
		color: #9A442A;
	}

	.cu-progress {
		background: #FFCE64;
	}

	.button-color {
		background: linear-gradient(270deg, #FE804A, #FA4F18);
	}

	.line-circle {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
	}

	.line-item {
		background-color: #FDB481;
		position: absolute;

	}

	.line-cup {
		position: absolute;
		margin-left: -16rpx;
	}

	.left1 {
		left: 20%;
	}

	.left2 {
		left: 50%;
	}

	.left3 {
		left: 90%;
	}

	@keyframes heart {
		0% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.9);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
